import React, { useEffect, useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const images = [
  {
    url: 'https://images.unsplash.com/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&q=80&w=1000',
    title: '春雷行动',
    subtitle: '凝聚团队力量，共创卓越未来'
  },
  {
    url: 'https://images.unsplash.com/photo-1594381898411-846e7d193883?auto=format&fit=crop&q=80&w=1000',
    title: '520狂欢',
    subtitle: '让快乐成为团队的动力'
  },
  {
    url: 'https://images.unsplash.com/photo-1574680178050-55c6a6a96e0a?auto=format&fit=crop&q=80&w=1000',
    title: '骄阳行动',
    subtitle: '挑战极限，突破自我'
  }
];

export default function Header() {
  const [currentImage, setCurrentImage] = useState(0);
  const [isAutoPlay, setIsAutoPlay] = useState(true);

  useEffect(() => {
    if (!isAutoPlay) return;
    
    const timer = setInterval(() => {
      setCurrentImage((prev) => (prev + 1) % images.length);
    }, 5000);
    
    return () => clearInterval(timer);
  }, [isAutoPlay]);

  const handlePrevious = () => {
    setIsAutoPlay(false);
    setCurrentImage((prev) => (prev - 1 + images.length) % images.length);
  };

  const handleNext = () => {
    setIsAutoPlay(false);
    setCurrentImage((prev) => (prev + 1) % images.length);
  };

  return (
    <header className="relative w-full h-64 overflow-hidden bg-gray-900">
      {/* 轮播图片 */}
      {images.map((image, index) => (
        <div
          key={image.url}
          className={`absolute inset-0 transition-all duration-700 ease-in-out transform ${
            currentImage === index ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full'
          }`}
        >
          <div className="absolute inset-0 bg-gradient-to-b from-black/30 to-black/60 z-10" />
          <img
            src={image.url}
            alt={image.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute bottom-0 left-0 right-0 p-6 z-20 text-white">
            <h2 className="text-2xl font-bold mb-2">{image.title}</h2>
            <p className="text-sm text-gray-200">{image.subtitle}</p>
          </div>
        </div>
      ))}

      {/* 轮播控制按钮 */}
      <div className="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-between px-4 z-30">
        <button
          onClick={handlePrevious}
          className="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/30 transition-colors"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
        <button
          onClick={handleNext}
          className="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/30 transition-colors"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
      </div>

      {/* 轮播指示器 */}
      <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2 z-30">
        {images.map((_, index) => (
          <button
            key={index}
            onClick={() => {
              setIsAutoPlay(false);
              setCurrentImage(index);
            }}
            className={`w-2 h-2 rounded-full transition-all duration-300 ${
              currentImage === index 
                ? 'bg-white w-6' 
                : 'bg-white/50 hover:bg-white/80'
            }`}
          />
        ))}
      </div>
    </header>
  );
}